<template>
  <div class="page">
    <!-- header -->
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="教练详情"
    >
      <template #right>
        <van-icon v-if="favorite" name="star-o" size="18" @click="enshrine" />
        <van-icon
          v-else
          name="star"
          color="rgb(252, 184, 20)"
          size="18"
          @click="cancel"
        />
      </template>
    </van-nav-bar>
    <div class="detail-page">
      <div class="in-panel">
        <div class="in-panel-bd">
          <van-cell class="teach-cell">
            <template #icon>
              <div class="teach-avatar">
                <img :src="CoachDetail.photo" alt />
              </div>
            </template>
            <template #title>
              <div class="cl-heading">
                <div class="cl-name">{{ CoachDetail.name }}</div>
                <div class="cl-tag">{{ CoachDetail.jl }}年驾龄</div>
              </div>
              <div class="raty-box">
                <van-rate
                  v-model="CoachDetail.xj"
                  size="16px"
                  allow-half
                  readonly
                  void-icon="star"
                  void-color="#eee"
                />
                <span>{{ CoachDetail.xj }}</span>
              </div>
              <!-- <div class="cl-attr">
                <span>石家庄第83名</span>
                <span class="line">|</span>
                <span>学员数51人</span>
              </div>-->
              <div class="cl-item">{{ CoachDetail.inscodename }}</div>
            </template>
            <!-- <template #right-icon>
              <van-button size="small" type="primary" round>关联教练</van-button>
            </template>-->
          </van-cell>
        </div>
      </div>
      <div class="in-panel" @click="href('/Cartography')">
        <div class="in-panel-hd">
          <div class="tt">地址</div>
          <div class="more">
            {{ CoachDetail.inscodename }}
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="in-panel-bd">
          <div class="panel-address">
            <van-icon name="location" />
            {{ CoachDetail.address }}
          </div>
        </div>
      </div>

      <!-- 班型 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">班型</div>
          <div @click="href('/AllBanks')" class="more">
            全部班型({{ banks }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="in-panel-classs">
          <van-cell
            class="class-cell"
            v-for="(item, i) in classlists"
            :key="i"
            @click="href('/BanksDetails', item.id)"
          >
            <template #icon>
              <div class="cl-style">{{ item.stageType }}</div>
            </template>
            <template #title>
              <div class="cl-head justify">
                <div class="cl-tit">{{ item.stageName }}</div>
                <div class="cl-price">￥{{ item.classPriceTotal }}</div>
              </div>
              <div class="cl-attr">
                <span>总课时:</span>
                <span>{{ item.classNumTotal }}</span>
              </div>
            </template>
          </van-cell>
        </div>
      </div>
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">简介</div>
        </div>
        <div class="in-panel-bd" v-if="CoachDetail.jljj">
          <div class="coach-intro" v-html="CoachDetail.jljj">
            {{ CoachDetail.jljj }}
          </div>
        </div>
        <div class="font-size" v-else>暂无简介~</div>
      </div>
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">教学环境</div>
          <div @click="href('/CoachEnvironment')" class="more">
            查看全部({{ remarkLength }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="bd-images" v-if="images.length != 0">
          <div v-for="(item, index) in images" :key="index" :span="6">
            <img @click="preview(item.fileurl)" :src="item.fileurl" alt />
          </div>
        </div>
        <div class="bd-images" v-else>
          <p>暂无教学环境~</p>
        </div>
      </div>

      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">个人风采</div>
        </div>
        <div class="bd-images" v-if="personageShow.length != '0'">
          <div v-for="(item, index) in personageShow" :key="index" :span="6">
            <img @click="preview(item.fileurl)" :src="item.fileurl" alt />
          </div>
        </div>
        <div class="bd-images" v-else>
          <p>暂无个人风采</p>
        </div>
      </div>

      <!-- 评论 -->
      <div class="in-panel">
        <div class="in-panel-hd">
          <div class="tt">评论</div>
          <div @click="href('/CoachComment')" class="more">
            <!-- 全部评论({{length}}) -->
            全部评论({{ length }})
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="top-border" v-if="comment.length != 0">
          <van-cell
            class="nBss-cell"
            v-for="(item, index) in comment"
            :key="index"
          >
            <template #icon>
              <div class="nb-avatar">
                <img :src="item.img" alt />
              </div>
            </template>
            <template>
              <div class="info">
                <div class="author">{{ item.pjname }}</div>
                <div class="comment-attr">
                  <div class="postTime">{{ item.pjsj }}</div>
                  <div class="raty-box">
                    <van-rate
                      v-model="item.jljs"
                      readonly
                      void-icon="star"
                      void-color="#eee"
                    />
                    <span>{{ item.jljs }}</span>
                  </div>
                </div>
              </div>
              <div class="content">
                <div class="text">
                  <span>{{ item.remarks }}</span>
                </div>
                <div class="bottom-icon"></div>
              </div>
            </template>
          </van-cell>
        </div>
        <div class="top-border" v-else>
          <p class="font-size">暂无评论~</p>
        </div>
      </div>
    </div>
    <div class="space-in"></div>

    <div class="in-tabbar">
      <van-button type="primary" @click="href('/ChargEconsult')">
        <van-icon name="phone-circle" />
        <span>免费咨询</span>
      </van-button>
      <van-button @click="href('/ApplyOnline')" type="primary" block plain>
        <van-icon name="comment-circle" />
        <span>在线报名</span>
      </van-button>
    </div>
  </div>
</template>
<script>
import {
  CoachDetail,
  coachComment,
  coachEnvironment,
  DetailsBanks,
  Collection,
  CancelCollection
} from "../../assets/js/api/apply";
import { Toast, ImagePreview } from "vant";

import { baseURL } from "../../assets/js/config";
import {
  DoubleCounting,
  MyFavorite,
  PersonageShow
} from "../../assets/js/api/user.js";
export default {
  data() {
    return {
      baseURL: "",
      text: "",
      // 评价等级

      // 教练详情
      CoachDetail: {},
      // 评论的个数
      length: "",
      // 教练评论
      comment: [],
      AllBanks: [], // 全部班型
      banks: "", // 班型总量
      classlists: [],
      // baseURL: "",
      // 教学环境的个数
      // school: "",
      // 教学环境
      images: [],
      id: "",
      remarkLength: "", // 教学环境
      signUp: "", // 验证该学员是否 已经报名
      favorite: true, // 收藏
      personageShow: [] // 个人风采
    };
  },

  // 接口
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    this.id = this.$route.params.id;
    // console.log(this.$route.params.id);
    this.baseURL = baseURL;
    // console.log("id:" + this.$route.params.lid);
    CoachDetail(this.$route.params.lid).then(res => {
      // console.log(res);
      this.CoachDetail = res.data;
      // console.log(this.CoachDetail);
    });

    // // // 找教练评论
    coachComment(this.$route.params.lid).then(res => {
      // console.log(res.data);
      let arr = res.data.pjList;
      // console.log(arr);
      this.length = arr.length;
      for (let i = 0; i < arr.length; i++) {
        if (i < 3) {
          arr[i].jljs = Number(arr[i].jljs);
          this.comment.push(arr[i]);
        }
      }
      // console.log(this.comment);
    });

    coachEnvironment(this.$route.params.id).then(res => {
      let array = res.data;
      // console.log(array);
      this.remarkLength = array.length;
      for (let i = 0; i < array.length; i++) {
        if (i < 4) {
          this.images.push(array[i]);
        }
      }
      // console.log(this.images);
    });

    // 班型
    // console.log(this.$route.params.lid);
    DetailsBanks(this.$route.params.id).then(res => {
      // console.log(res.data);
      let allBanks = res.data;
      for (let i = 0; i < allBanks.length; i++) {
        this.AllBanks.push(allBanks[i].stageType);
      }
      let length = res.data;
      this.banks = length.length;
      // let a = 0;
      for (let i = 0; i < this.banks; i++) {
        if (i < 3) {
          // a++;
          // console.log(a);
          this.classlists.push(length[i]);
        }
        // return;
      }
    });

    // 是否已经报名
    if (localStorage.getItem("token") || sessionStorage.getItem("token")) {
      DoubleCounting().then(res => {
        // console.log(res.code);
        this.signUp = res.code;
      });
      MyFavorite().then(res => {
        // console.log(res);
        let collect = res.data.list;
        for (let i = 0; i < collect.length; i++) {
          if (this.$route.params.lid == collect[i].docid) {
            this.favorite = false;
          }
        }
      });
    }

    // 个人风采
    PersonageShow(this.$route.params.lid).then(res => {
      // console.log(res);
      this.personageShow = res.data;
    });
  },

  methods: {
    // 收藏和取消
    // 收藏
    enshrine() {
      // console.log("收藏");
      let obj = {
        title: this.CoachDetail.name,
        lb: "6",
        docid: this.CoachDetail.drillId,
        jgbh: this.CoachDetail.jgbh
      };
      // console.log(obj);
      Collection(obj).then(res => {
        // console.log(res);
        if (res.code == 506) {
          Toast("重复收藏");
        }
        if (res.code == 0) {
          Toast.success("收藏成功");
          this.favorite = false;
        }
      });
    },
    // 取消收藏
    cancel() {
      CancelCollection(this.CoachDetail.drillId).then(res => {
        // console.log(res);
        if (res.code == 0) {
          Toast.success("取消成功");
          this.favorite = true;
        }
      });

      // console.log("取消收藏");
    },

    // 图片预览
    preview(url) {
      ImagePreview([url]);
    },

    href(url, id) {
      if (url == "/CoachEnvironment") {
        let lid = this.CoachDetail.jgbh;
        // console.log("驾校id是我：" + lid);
        this.$router.push({ path: `${url}/${lid}` });
      } else if (url == "/ChargEconsult") {
        let id = this.$route.params.id;
        this.$router.push({ path: `${url}/${id}` });
      } else if (url == "/ApplyOnline") {
        if (!localStorage.getItem("token")) {
          this.$router.push({ path: "/AuthCode" });
          return;
        }
        if (this.signUp === "") {
          Toast("网络繁忙");
          return;
        }
        if (this.signUp == 501) {
          let id = this.$route.params.id;
          let lid = this.CoachDetail.drillId;
          this.$router.push({ path: `${url}/${id}/${lid}` });
        } else {
          Toast.success("您已成功报名");
        }
      } else if (url == "/BanksDetails") {
        // let lid = this.$route.params.id;
        this.$router.push({ path: `${url}/${id}` });
      } else if (url == "/AllBanks") {
        let lid = this.$route.params.id;
        this.$router.push({ path: `${url}/${lid}` });
      } else if (url == "/Cartography") {
        console.log(this.CoachDetail.jd, this.CoachDetail.wd);
        this.$router.push({
          path: `${url}/${this.CoachDetail.jd}/${this.CoachDetail.wd}`
        });
      } else {
        let lid = this.$route.params.lid;
        this.$router.push({ path: `${url}/${lid}` });
      }
    },

    onClickLeft() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style></style>
